<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-2">
        radio
        <br/>
        <input type="radio" v-model="pick" :value="a"> {{ pick }}
        <hr/> select
        <br/>
        <input type="checkbox" v-model="toggle" :true-value="a" :false-value="b"> {{ toggle }}
        <hr/> select list
        <br/>
        <select v-model="selected">
            <!-- 内联对象字面量 -->
            <option v-bind:value="{ number: 123 }">123</option> {{ selected }}
        </select>
        <hr/> .lazy
        <br/>
        <!-- 在 "change" 而不是 "input" 事件中更新 -->
        <input v-model.lazy="lazyMsg" > {{ lazyMsg }}
        <hr/> .number
        <br/>
        <input v-model.number="age" type="number"> {{ age }}
        <hr/> .trim
        <br/>
        <input v-model.trim="trimMsg"> {{ trimMsg }}
    </div>
    <script>
        var app2 = new Vue({
            el: '#app-2',
            data: {
                a: 'a',
                b: 'b',
                pick: '',
                toggle: '',
                selected: {},
                age: 0,
                lazyMsg: '',
                trimMsg: ''
            }
        });
    </script>
</body>


</html>